<template>
  <div class="reserve-item">
    <records-block :records="formattedData" />
  </div>
</template>

<script>
import RecordsBlock from './RecordsBlock.vue'

export default {
  name: 'ReserveItem',
  components: {
    RecordsBlock
  },
  props: {
    record: {
      type: Object,
      required: true
    }
  },
  computed: {
    formattedData() {
      const { record } = this
      let roomInfo = {}
      try {
        roomInfo = JSON.parse(record.room || '{}')
      } catch (e) {
        console.error('解析会议室信息失败:', e)
        roomInfo = {}
      }

      return [
        {
          name: '会议室',
          value: roomInfo.name ? `${roomInfo.name} (${roomInfo.address ?? '-'})` : '-'
        },
        {
          name: '开始时间',
          value: record.start_time || ''
        },
        {
          name: '结束时间',
          value: record.end_time || ''
        },
        {
          name: '使用原因',
          value: record.reason || ''
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.reserve-item {
  .info-item {
    margin-bottom: 8px;
    line-height: 1.5;

    .label {
      color: #606266;
    }

    .value {
      color: #303133;
    }
  }
}
</style>
